<!--
    @作者：814878176@qq.com
    @时间：2020-03-30
    @描述：首页-菜单导航
	@使用："path": "pages/tabBar/home/homeNav"
 -->
<template>
	<view>
		<image class="uni-image img-bg" mode="widthFix" src="/static/home/bg_2.png" />
		<view class="content-wrapper">
			<view class="img-logo uni-align-c uni-m-b-20">
				<image class="uni-image" mode="widthFix" src="/static/home/logo_1.png" />
			</view>
			<view class="img-title uni-align-c uni-m-b-40">
				<image class="uni-image" mode="widthFix" src="/static/home/logo_2.png" />
			</view>
			<view class="navs-wrapper">	
				<view class="nav-item" v-for="(item,index) in lists" :key="index"
					 @click="goDetailPage(item.router)">
					<image class="uni-image" mode="widthFix" :src="item.url" />
				</view>
			</view>
		</view>
		<view v-if="!showPage" class="bank-wrapper"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPage: false,
				navigateFlag: false,
				lists: [
					{
						name: "致敬抗疫英烈",
						url: "/static/home/nav_1.png",
						router: "activityOne/index"
					},
					{
						name: "清明祭祖祈福",
						url: "/static/home/nav_2.png",
						router: "activityTwo/index"
					}
				]
			}
		},
		onLoad() {
			if(!localStorage.getItem('token')){
				this.register();
			}
			setTimeout(()=>{
				this.showPage = true;
			},500)
		},
		methods: {
			// 页面路由跳转
			goDetailPage(path) {
				uni.navigateTo({
					url: "/pages/" + path
				});
			}
		}
	}
</script>

<style lang="stylus" scoped>
	@import "../../common/css/var.styl"   
	.content-wrapper {
		position: absolute;
		top: 0;
		width: 100%;
		// logo
		.img-logo {
			padding-top: 128upx;
			.uni-image {
				width: 108upx;
				height: 103upx;
			}
		}
		// 标题
		.img-title {
			.uni-image {
				width: 656upx;
				height: 201upx;
			}
		}
		// 菜单导航
		.navs-wrapper {
			position: relative;  // 设置层级，以防被背景图遮盖
			z-index: 99;
			width: 100%;
			text-align: center;
			.nav-item {
				margin-bottom: 32upx;
				// 按钮图片
				.uni-image {
					width: 532upx;
					height: 149upx;
					vertical-align: middle;
				}
			}
		}
	}
	
</style>
